@import '../../var';
page {
    background-color: $bgcolor-gray;
}

.headerTitle {
    font-size: 36rpx;
    font-weight: 600;
    color: $title-color;
}

.header {
    padding: 30rpx 30rpx 0rpx;
    background-color: $bgcolor-light;
    .user {
        display: flex;
        width: 100%;
        .userImg {
            width: 120rpx;
            height: 120rpx;
            flex-shrink: 0;
        }
        .verify {
            display: flex;
            align-items: center;
            align-items: flex-start;
            line-height: 26rpx;
            image {
                width: 26rpx;
                height: 26rpx;
            }
            text {
                margin-top: 2rpx;
                margin-left: 6rpx;
                font-weight: 400;
                font-size: 26rpx;
                text-align: left;
            }
        }
        .userInfo {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            padding: 20rpx 30rpx;
            .name {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                width: 100%;
                font-weight: 700;
                font-size: 32rpx;
                line-height: 32rpx;
                image {
                    width: 32rpx;
                    height: 32rpx;
                    margin-left: 40rpx;
                }
            }
            .introduce {
                width: 100%;
                margin-top: 22rpx;
                color: $info-color;
                font-size: 28rpx;
            }
        }
        .right {
            display: flex;
            align-items: center;
            image {
                width: 24rpx;
                height: 24rpx;
                margin-top: 70rpx;
            }
        }
    }
    .userSns {
        display: flex;
        align-items: center;
        margin-top: 16rpx;
        padding-bottom: 20rpx;
        padding-left: 16rpx;
        font-weight: 700;
        font-size: 28rpx;
        .follow {
            position: relative;
            &:first-child {
                .badge {
                    position: absolute;
                    top: -14rpx;
                    right: 50rpx;
                    height: 22rpx;
                    margin-right: 0;
                    color: #fff;
                    line-height: 24rpx;
                    background-color: #f03531;
                    border-radius: 50rpx;
                }
            }
        }
        .inviteCode {
            font-size: 32rpx;
        }
        text {
            margin-right: 70rpx;
            padding: 0rpx 7rpx;
            color: $info-color;
            font-weight: 500;
            font-size: 20rpx;
        }
    }
    .vip {
        position: relative;
        width: 100%;
        height: 112rpx;
        margin: 20rpx 0 0 0rpx;
        .card {
            position: absolute;
            width: 100%;
            height: 100%;
            image {
                border-radius: 20rpx 20rpx 0rpx 0rpx;
                width: 100%;
                height: 100%;
            }
        }
        .content {
            position: absolute;
            z-index: 2;
            display: flex;
            width: 100%;
            height: 100%;
            padding: 26rpx 28rpx;
            color: #fde397;
            .left {
                flex: 1;
                .activeTitle {
                    color: $vip-text-color;
                }
                .title {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    font-size: 26rpx;
                    image {
                        width: 24rpx;
                        height: 22rpx;
                        margin-right: 10rpx;
                    }
                }
                .des {
                    font-size: 20rpx;
                    margin-top: 2rpx;
                }
            }
            .activebgc {
                color: #fdfade !important;
                background: linear-gradient( 0deg, rgba(26, 23, 22, 1) 0%, rgba(69, 65, 65, 1) 100%) !important;
            }
            .right {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 147rpx;
                height: 55rpx;
                color: #383433;
                font-size: 24rpx;
                background: linear-gradient(0deg, rgba(253, 227, 151, 1) 0%, rgba(253, 250, 222, 1) 100%);
                border-radius: 8rpx;
                image {
                    width: 7rpx;
                    height: 9rpx;
                    margin-left: 6rpx;
                }
            }
        }
    }
}

.myCat {
    margin-top: 20rpx;
    padding: 30rpx 0rpx 30rpx 36rpx;
    background-color: $bgcolor-light;
    &.needPadding {
        padding: 30rpx 36rpx;
    }
    .addCat {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 684rpx;
        height: 100rpx;
        margin-bottom: 20rpx;
        font-weight: 700;
        font-size: 32rpx;
        background-color: $primary-color;
        border-radius: 10rpx;
    }
    .hasCat {
        view:first-child {
            display: flex;
            justify-content: space-between;
            font-weight: 700;
            font-size: 30rpx;
            text:last-child {
                display: flex;
                align-items: center;
                padding-right: 30rpx;
                color: #1a1a1a;
                font-weight: 700;
            }
        }
        .catList {
            display: flex;
            width: 100%;
            height: 100rpx;
            margin-top: 36rpx;
            overflow: hidden;
            font-weight: 700;
            background-color: $bgcolor-gray;
            border-radius: 10rpx;
            &:nth-child(n + 5) {
                display: none;
            }
            .catImg {
                width: 100rpx;
                height: 100rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            .catInfo {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 614rpx;
                padding: 0rpx 30rpx 0rpx 30rpx;
                font-size: 30rpx;
                .logs {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 44rpx;
                    padding: 0 10rpx;
                    color: #ffffff;
                    font-weight: 500;
                    font-size: 20rpx;
                    background: rgba(206, 206, 206, 1);
                    border-radius: 22px;
                    image {
                        width: 30rpx;
                        height: 30rpx;
                        margin-right: 10rpx;
                        border-radius: 50%;
                    }
                }
                .shareBtn {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 140rpx;
                    height: 48rpx;
                    color: $bgcolor-light;
                    font-weight: 500;
                    font-size: 24rpx;
                    background: $share-bgcolor;
                    border-radius: 24rpx;
                }
                .text {
                    color: $info-color;
                    font-weight: normal;
                    font-size: 24rpx;
                }
                .no-passed {
                    height: 70rpx;
                    image {
                        width: 70rpx;
                        height: 70rpx;
                    }
                }
            }
        }
        .log {
            display: flex;
            width: fit-content;
            align-items: center;
            max-width: 250rpx;
            height: 44rpx;
            margin: 30rpx auto 0;
            padding: 0 10rpx;
            color: #ffffff;
            font-weight: 500;
            font-size: 20rpx;
            background: rgba(206, 206, 206, 1);
            border-radius: 22px;
            image {
                display: inline-block;
                width: 30rpx;
                height: 30rpx;
                margin-right: 10rpx;
                border-radius: 50%;
            }
        }
        .watchDetail {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            width: 100%;
            height: 70rpx;
            color: #b3b3b3;
            font-size: 28rpx;
        }
    }
}

.listBox {
    width: 100%;
    margin-top: 20rpx;
    .list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 102rpx;
        font-weight: 700;
        &:nth-child(1) {
            .leftBox {
                .iconBox {
                    width: 30rpx;
                    height: 35rpx;
                }
            }
        }
        .leftBox {
            display: flex;
            align-items: center;
            .iconBox {
                display: flex;
                align-items: center;
                width: 30rpx;
                height: 30rpx;
                margin-right: 30rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .rightBox {
            display: flex;
            align-items: center;
            color: #b3b3b3;
            font-weight: 500;
            font-size: 28rpx;
            image {
                width: 24rpx;
                height: 24rpx;
                margin-left: 18rpx;
            }
        }
    }
    padding: 30rpx;
    padding-bottom: 200rpx;
    font-size: 30rpx;
    background-color: $bgcolor-light;
}